<template>
    <div>
        <TitleHeader name="商品列表"></TitleHeader>
        <el-table :data="commlist" style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" class="demo-table-expand info">
            <div class="info-left">
            <el-form-item label="商品 ID"><span>{{ props.row.id }}</span></el-form-item>
            <el-form-item label="所属分类"><span>{{ props.row.category }}</span></el-form-item>
            <el-form-item label="商品图片"><span>33</span></el-form-item>
            <el-form-item label="商品评价"><span>{{ props.row.rating }}</span></el-form-item>
            <el-form-item label="商品描述"><span>{{ props.row.goodsDesc }}</span></el-form-item>
            </div>
            <div class="info-right">
            <el-form-item label="商品名称"><span>{{ props.row.name }}</span></el-form-item>
            <el-form-item label="商品价格"><span>{{ props.row.price }}</span></el-form-item>
            <el-form-item label="创建时间"><span>{{ props.row.ctime }}</span></el-form-item>
            <el-form-item label="商品销量"><span>{{ props.row.sellCount }}</span></el-form-item>
            </div>
        </el-form>
      </template>
    </el-table-column >
        <el-table-column label="商品名称" prop="name"></el-table-column>
        <el-table-column label="所属分类" prop="category"> </el-table-column>
        <el-table-column label="商品价格" prop="price"></el-table-column>
        <el-table-column label="商品图片" prop="imgUrl">
            <template slot-scope="props">
                <el-image style="width: 40px; height: 40px" :src="props.row.imgUrl" ></el-image>
            </template>
        </el-table-column>
        <el-table-column label="描述" prop="goodsDesc" >
          <template slot-scope="props"><span class="goods-desc" >{{props.row.goodsDesc}}</span></template>
        </el-table-column>
        <el-table-column label="操作" width="180">
        <template slot-scope="props"><el-button type="primary" @click="amandgoods(props.row)">编辑</el-button> <el-button type="danger" @click="deleGoods(props.row.id)">删除</el-button></template>
        </el-table-column>
  </el-table>
  <div class="block idlist-page">
         <el-pagination @size-change="handleSizeChange" :current-page="currentPage" :page-sizes="pagesizeset" :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper" :total="total"  @current-change="page"> </el-pagination>
    </div>
    <el-dialog title="修改商品" :visible.sync="dialogVisible" width="30%" >
        <p class="addcate-p">商品名称<el-input class="addcate-input" style="width:300px" placeholder="商品名称" v-model="goodsinfo.name"></el-input></p>
       <p class="addcate-p">所属分类<el-select class="addcate-input" style="width:300px" placeholder="所属分类" v-model="goodsinfo.category">
         <el-option v-for="item in cate" :key="item.cateName" :value="item.cateName" :label="item.cateName">

         </el-option>
         
         </el-select></p>
        <p class="addcate-p">商品价格<el-input class="addcate-input" style="width:300px" placeholder="商品价格" v-model="goodsinfo.price"></el-input></p>
         <div class="addcate-p">商品图片<el-upload class="addcate-image" style="width: 60px; height: 60px" action="http://127.0.0.1:5000/goods/goods_img_upload" :show-file-list="false" :on-success="handleAvatarSuccess" >
           <img  :src="imgUrl" style="width: 60px; height: 60px" />
           </el-upload></div>
          <p class="addcate-p">商品描述<el-input class="addcate-input" style="width:300px" placeholder="商品描述" v-model="goodsinfo.goodsDesc"></el-input></p>
      <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="clickadd">确 定</el-button>
     </span></el-dialog>
    </div>
</template>

<script>
import TitleHeader from '../../../components/TitleHeader';
// import Pager from '../../../components/Pager';
import {goodsList,goodsDele,amendGoods,getCateName} from '@/apis/goods';
import {TimeTransition} from '@/utils/utils'
    export default {
        data(){
            return{
             
                commlist:[],
                currentPage: 1,
                pagesize:5,
                pagesizeset:[5, 10],
                total:0,
                dialogVisible: false,
                goodsinfo:{},
                cate:'',
                imgUrl:'',
            }
        },
        methods:{
          getGoodsList(){
            goodsList({currentPage:this.currentPage,pageSize:this.pagesize}).then(res=>{
              for (let v of res.data.data) {
               v.ctime=TimeTransition(v.ctime)
              let newimg=v.imgUrl.split('5000').slice(-1)
              v.imgUrl="http://127.0.0.1:5000"+newimg
              
              }
              this.commlist=res.data.data;
              this.total=res.data.total;
            })
          },
          page(p){
            this.currentPage=p
            this.getGoodsList()
          },
          handleSizeChange(i){
            this.pagesize=i;
            this.getGoodsList()
          },
          deleGoods(id){
            this.$confirm('此操作将永久删除商品, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'})
              .then(() => {
                goodsDele({id:id}).then(res=>{
                    if(res.data.code==0){
                      
                        this.$message({type: 'success',message: '臭臭世界提示:删除成功!',center: true});

                        this.getGoodsList()
                    }else{
                        this.$message({type: 'error',message: '臭臭世界提示:删除失败!',center: true});
                    }
                })
                 })
                 .catch(() => {this.$message({type: 'success',message: '臭臭世界提示:已取消成功',center: true});});  
          },
          amandgoods(row){
              getCateName().then(res=>{
                this.cate=res.data.categories;
              })
              this.goodsinfo=JSON.parse(JSON.stringify(row))
                this.imgUrl=row.imgUrl;

            this.dialogVisible=true;


          },
         
          clickadd(){
            let {name,category,price,goodsDesc,id}=this.goodsinfo
               amendGoods({name,category,price,goodsDesc,id,imgUrl:this.imgUrl}).then(res=>{
              if(res.data.code==0){
                this.$message({type: 'success',message: '臭臭世界提示:商品修改成功',center: true});
                 this.getGoodsList();
                 this.dialogVisible=false;
              }
            })
          },
          handleAvatarSuccess(res){
            if(res.code==0){
             let oldimg= this.imgUrl.substring(0,this.imgUrl.lastIndexOf('/')+1)
              this.imgUrl=oldimg+res.imgUrl;
            }
          }
        },
        components:{
            TitleHeader,
        },
        created(){
          this.getGoodsList()
        }

    }
</script>

<style lang="less" scoped>
.info{
    display: flex;
    .info-left{
      width: 250px;
        display: flex;
        flex-direction: column;
        margin-right: 100px;

    }
      .info-right{
        width: 250px;
        display: flex;
        flex-direction: column;

    }
}
.info-left .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    
  }
  .info-right .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
        line-height: 10px;
    
  }
  .goods-desc{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .idlist-page {
  padding: 20px;
  padding-bottom: 0;
}
.addcate-p{
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}
.addcate-input{
    margin-left: 5px;
    flex: 1;
}
.addcate-image{
    margin-left: 5px;
    
}
</style>